/*
 * @Description:
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-05-27 12:01:18
 * @LastEditTime: 2024-09-03 20:56:53
 */
import { ref, computed } from "../utils/vue.esm.js"
import { getSocialMeta, updateSocialMeta } from "./api/articleMeta.js"
const template = /*html*/ `
<!-- 社交 -->
<div class="post-social">
  <div class="btn" :class="{loading: loading, active: isLike}" @click="bindTapLike">
    <svg
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      ><path
        d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z"
      /><path
        d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
      /><path
        d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z"
      />
    </svg>
    <span>喜欢</span>
    <span>{{likeCount}}</span>
  </div>
  <div class="btn" @click="bindTapComment">
    <svg
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      ><path
        d="M207.872 541.696c-11.776 0-24.064-11.776-24.064-24.064v-184.32c0-47.616 35.84-83.456 83.456-83.456h333.824c11.776 0 24.064 11.776 24.064 24.064 0 11.776-6.144 17.92-17.92 17.92H267.776c-17.92 0-35.84 17.92-35.84 41.984V524.8c0 11.264-12.288 16.896-24.064 16.896z"
      /><path
        d="M589.312 929.28c-17.92 0-29.696-6.144-41.984-17.92l-107.52-101.376h-166.4c-47.616 0-83.456-35.84-83.456-83.456v-107.52H112.64c-41.984 0-77.312-35.84-77.312-83.456v-363.52c0-41.984 35.84-77.312 77.312-77.312h524.8c41.984 0 83.456 35.84 83.456 83.456v77.312h184.832c47.616-6.144 83.456 29.696 83.456 77.312v387.584c0 47.616-35.84 83.456-83.456 83.456H738.816l-107.52 113.152c-11.776 6.656-29.696 12.288-41.984 12.288zM112.64 136.192c-17.92 0-29.696 17.92-29.696 35.84v363.52c0 24.064 11.776 35.84 29.696 35.84h95.232c11.776 0 24.064 11.776 24.064 24.064v125.44c0 24.064 17.92 41.984 41.984 41.984h178.688c6.144 0 11.776 0 17.92 6.144L583.68 882.176c6.144 6.144 11.776 6.144 17.92 0l113.152-113.152c6.144-6.144 11.776-6.144 17.92-6.144H911.36c24.064 0 41.984-17.92 41.984-41.984V333.312c0-24.064-17.92-41.984-41.984-41.984H702.464c-11.776 0-24.064-11.776-24.064-24.064v-95.232c0-17.92-17.92-35.84-35.84-35.84H112.64z"
      /><path
        d="M887.808 547.84c0 11.776-11.776 24.064-24.064 24.064h-542.72c-11.776 0-24.064-11.776-24.064-24.064 0-11.776 11.776-24.064 24.064-24.064h548.352c12.288 0 18.432 12.288 18.432 24.064z"
      />
      </svg>
    <span>评论</span>
    <span>{{commentsCount}}</span>
  </div>
  <div class="btn" :class="{loading: loading}" @click="bindTapShare">
    <svg
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      ><path
        d="M92.247 890.84c-3.392 0-6.781 0-10.17-3.389-13.554-6.776-20.33-20.33-16.943-33.883 57.608-294.811 233.816-481.18 511.68-532.01V162.292c0-10.166 6.776-23.72 16.942-27.107 10.165-3.387 23.718-3.387 30.5 6.777l328.69 328.694c6.78 6.778 6.78 13.555 6.78 20.331 0 6.78-3.393 13.558-10.169 20.335L620.863 840.015c-6.776 6.777-20.33 10.165-30.496 6.777-10.164-3.39-16.942-13.553-16.942-27.111V657.03c-206.701 3.388-352.415 74.548-457.46 223.645-6.777 6.775-16.941 10.164-23.718 10.164zM631.034 230.07v115.208c0 13.555-10.171 27.111-23.725 30.5-267.698 37.271-396.465 203.317-457.46 372.743 111.825-105.043 257.534-152.487 450.684-152.487 16.94 0 27.11 13.556 27.11 30.496v121.99l257.53-257.533-254.14-260.917z m0 0"
      />
    </svg>
    <span>分享</span>
    <span>{{shareCount}}</span>
  </div>
</div>
<div v-if="showShareUp" class="share-up">
  <div class="share-btn">
    <a
      class="share-weixin"
      @click="bindTapShareUp('weixin')"
      title="分享到微信">
          <svg t="1723106477539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5235" width="40" height="40"><path d="M579.0208 512c-11.776 0-23.552 10.752-23.552 24.0384 0 10.752 11.776 21.4784 23.552 21.4784 17.408 0 30.1824-10.752 30.1824-21.504 0-13.2864-12.8-24.0128-30.1824-24.0128z m-76.7232-170.8544c-17.408 0-34.2784 10.752-34.2784 29.1584 0 17.408 16.896 29.1584 34.2784 29.1584 18.432 0 30.1824-11.776 30.1824-29.184 0-18.3808-11.776-29.1328-30.208-29.1328z m-164.7104 0c-17.408 0-35.8144 10.752-35.8144 29.1584 0 17.408 18.432 29.1584 35.84 29.1584 16.3328 0 30.1568-11.776 30.1568-29.184-0.512-18.3808-13.824-29.1328-30.1824-29.1328z m164.7104 0c-17.408 0-34.2784 10.752-34.2784 29.1584 0 17.408 16.896 29.1584 34.2784 29.1584 18.432 0 30.1824-11.776 30.1824-29.184 0-18.3808-11.776-29.1328-30.208-29.1328zM579.0208 512c-11.776 0-23.552 10.752-23.552 24.0384 0 10.752 11.776 21.4784 23.552 21.4784 17.408 0 30.1824-10.752 30.1824-21.504 0-13.2864-12.8-24.0128-30.1824-24.0128z m130.944 0c-12.288 0-23.552 10.752-23.552 24.0384 0 10.752 10.752 21.4784 23.552 21.4784 16.896 0 29.1584-10.752 29.1584-21.504 0-13.2864-12.8-24.0128-29.184-24.0128z m0 0c-12.288 0-23.552 10.752-23.552 24.0384 0 10.752 10.752 21.4784 23.552 21.4784 16.896 0 29.1584-10.752 29.1584-21.504 0-13.2864-12.8-24.0128-29.184-24.0128z m-130.944 0c-11.776 0-23.552 10.752-23.552 24.0384 0 10.752 11.776 21.4784 23.552 21.4784 17.408 0 30.1824-10.752 30.1824-21.504 0-13.2864-12.8-24.0128-30.1824-24.0128z m-76.7232-170.8544c-17.408 0-34.2784 10.752-34.2784 29.1584 0 17.408 16.896 29.1584 34.2784 29.1584 18.432 0 30.1824-11.776 30.1824-29.184 0-18.3808-11.776-29.1328-30.208-29.1328z m-164.7104 0c-17.408 0-35.8144 10.752-35.8144 29.1584 0 17.408 18.432 29.1584 35.84 29.1584 16.3328 0 30.1568-11.776 30.1568-29.184-0.512-18.3808-13.824-29.1328-30.1824-29.1328zM511.5136 0.9984C229.12 0.9984 0 230.144 0 512.4864 0 794.88 229.1456 1024 511.488 1024c282.368 0 511.488-229.1456 511.488-511.488C1022.976 230.144 793.856 0.9984 511.488 0.9984z m-75.7248 640.4096c-6.656 1.024-14.3104 1.024-20.9664 1.024-30.6944 0-53.1968-5.12-82.3552-13.312l-84.3776 41.9328 24.0384-71.6032c-59.3408-41.9328-94.1312-94.1056-94.1312-158.5664 0-113.536 106.9056-199.9872 236.3136-199.9872 115.0976 0 217.3952 68.0192 237.3376 164.7104-8.192-1.536-15.872-2.56-22.5024-2.56-113.5616 0-200.4992 84.8896-200.4992 187.2128 0.512 18.4064 3.072 34.2528 7.168 51.1488z m279.808 106.3936c-24.064 5.12-47.5648 12.288-71.6032 12.288-111.5136 0-200.0128-76.7488-200.0128-171.8784 0-95.1552 88.4992-171.3664 200.0128-171.3664 105.856 0 200.4992 76.7232 200.4992 171.3664 0 53.1968-35.8144 100.7616-82.3552 135.0144l16.896 59.8528-63.4368-35.2768zM709.9648 512c-12.288 0-23.552 10.752-23.552 24.0384 0 10.752 10.752 21.4784 23.552 21.4784 16.896 0 29.1584-10.752 29.1584-21.504 0-13.2864-12.8-24.0128-29.184-24.0128z m-130.944 0c-11.776 0-23.552 10.752-23.552 24.0384 0 10.752 11.776 21.4784 23.552 21.4784 17.408 0 30.1824-10.752 30.1824-21.504 0-13.2864-12.8-24.0128-30.1824-24.0128zM532.48 370.304c0-18.432-11.776-29.1584-30.208-29.1584-17.3568 0-34.2528 10.752-34.2528 29.1584 0 17.408 16.896 29.1584 34.2784 29.1584 18.432 0 30.1824-11.776 30.1824-29.184z m-194.8928-29.1584c-17.408 0-35.8144 10.752-35.8144 29.1584 0 17.408 18.432 29.1584 35.84 29.1584 16.3328 0 30.1568-11.776 30.1568-29.184-0.512-18.3808-13.824-29.1328-30.1824-29.1328z m0 0c-17.408 0-35.8144 10.752-35.8144 29.1584 0 17.408 18.432 29.1584 35.84 29.1584 16.3328 0 30.1568-11.776 30.1568-29.184-0.512-18.3808-13.824-29.1328-30.1824-29.1328z m164.7104 0c-17.408 0-34.2784 10.752-34.2784 29.1584 0 17.408 16.896 29.1584 34.2784 29.1584 18.432 0 30.1824-11.776 30.1824-29.184 0-18.3808-11.776-29.1328-30.208-29.1328zM579.0208 512c-11.776 0-23.552 10.752-23.552 24.0384 0 10.752 11.776 21.4784 23.552 21.4784 17.408 0 30.1824-10.752 30.1824-21.504 0-13.2864-12.8-24.0128-30.1824-24.0128z m130.944 0c-12.288 0-23.552 10.752-23.552 24.0384 0 10.752 10.752 21.4784 23.552 21.4784 16.896 0 29.1584-10.752 29.1584-21.504 0-13.2864-12.8-24.0128-29.184-24.0128z m-372.3776-170.8544c-17.408 0-35.8144 10.752-35.8144 29.1584 0 17.408 18.432 29.1584 35.84 29.1584 16.3328 0 30.1568-11.776 30.1568-29.184-0.512-18.3808-13.824-29.1328-30.1824-29.1328zM709.9648 512c-12.288 0-23.552 10.752-23.552 24.0384 0 10.752 10.752 21.4784 23.552 21.4784 16.896 0 29.1584-10.752 29.1584-21.504 0-13.2864-12.8-24.0128-29.184-24.0128z" fill="#0AB70E" p-id="5236"></path></svg>
          <div>分享到微信</div>
    </a>
    <a
      class="share-weibo"
      @click="bindTapShareUp('weibo')"
      title="分享到新浪微博">
        <svg t="1723106776259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9609" width="40" height="40"><path d="M512 0C229.243259 0 0 229.224296 0 512s229.243259 512 512 512 512-229.224296 512-512S794.756741 0 512 0zM460.8 778.24c-175.312593 0-317.44-91.685926-317.44-204.781037 0-113.095111 212.859259-291.688296 294.286222-291.688296 34.133333 0 101.148444 25.448296 54.272 106.078815-3.280593 5.632 105.718519-46.895407 165.300148-12.344889 59.600593 34.550519 0 90.055111 0 96.218074 0 6.162963 119.656296 6.162963 119.656296 101.717333C776.874667 686.554074 636.112593 778.24 460.8 778.24zM710.276741 359.461926c-19.740444-23.438222-55.030519-17.957926-55.030519-17.957926-10.334815 0.094815-18.375111-7.111111-19.797333-16.839111-0.132741 0.986074-0.568889 1.896296-0.568889 2.901333l0-5.707852c0 1.005037 0.436148 1.85837 0.568889 2.806519 1.422222-9.993481 9.53837-18.792296 19.740444-20.138667 0 0 42.723556-11.681185 79.739259 21.636741 37.015704 33.317926 21.864296 88.405333 21.864296 88.405333-1.592889 11.207111-12.553481 20.15763-23.931259 20.15763L730.832593 434.725926c-11.396741 0-18.033778-8.779852-14.904889-19.607704C715.927704 415.099259 729.998222 382.900148 710.276741 359.461926zM850.62163 430.26963c-1.422222 15.587556-15.018667 28.273778-30.511407 30.01837 1.137778 0.132741 2.23763 0.341333 3.432296 0.341333l-6.97837 0c1.194667 0 2.37037-0.208593 3.546074-0.341333-15.018667-1.744593-25.125926-14.449778-22.945185-30.056296 0 0 16.70637-64.606815-23.988148-123.031704-40.713481-58.424889-128.208593-48.336593-128.208593-48.336593-15.54963-0.018963-28.596148-11.45363-30.245926-26.718815-0.113778 1.080889-0.32237 2.123852-0.32237 3.223704l0-6.409481c0 1.099852 0.208593 2.123852 0.32237 3.185778 1.649778-15.265185 14.506667-27.439407 30.340741-27.553185 0 0 91.098074-9.197037 158.947556 54.954667C871.860148 323.678815 850.62163 430.26963 850.62163 430.26963z" fill="#F56467" p-id="9610"></path><path d="M450.56 573.44m-20.48 0a1.08 1.08 0 1 0 40.96 0 1.08 1.08 0 1 0-40.96 0Z" fill="#F56467" p-id="9611"></path><path d="M403.303951 640.642444a1.62 2.159 0 1 0-25.964544-55.683072 1.62 2.159 0 1 0 25.964544 55.683072Z" fill="#F56467" p-id="9612"></path><path d="M432.033185 451.830519c-111.995259 15.739259-194.484148 87.514074-184.263111 160.331852 10.221037 72.817778 109.321481 119.087407 221.335704 103.329185 112.014222-15.739259 194.503111-87.514074 184.282074-160.331852C643.147852 482.360889 544.047407 436.091259 432.033185 451.830519zM448.398222 695.675259c-66.635852 12.951704-129.384296-21.560889-140.174222-77.065481-10.789926-55.523556 34.474667-111.009185 101.091556-123.960889 66.635852-12.970667 129.384296 21.541926 140.174222 77.065481C560.260741 627.218963 515.015111 682.723556 448.398222 695.675259z" fill="#F56467" p-id="9613"></path></svg>
        <div>分享到微博</div>
    </a>
  </div>
  <div class="mobile">手机访客请使用浏览器自带的分享功能</div>
  <i class="close" @click="showShareUp = false;loading = false;">×</i>
</div>
<div v-if="showQrcode" class="qrcode">
  <h5>微信扫码分享</h5>
  <img :src="'https://api.qrserver.com/v1/create-qr-code/?size=200x200&amp;data=' + currURL"/>
  <i class="close" @click="showQrcode = false;loading = false;">×</i>
</div>
`
export default {
  template,
  setup () {
    const postId = computed(() =>
      document.getElementById("Article").getAttribute("post-id")
    )
    const isLike = ref(false)
    const showShareUp = ref(false)
    const showQrcode = ref(false)
    const likeCount = ref(0)
    const commentsCount = ref(0)
    const shareCount = ref(0)
    const currURL = document.URL

    const loading = ref(true)

    function getLikeIs () {
      isLike.value = localStorage.getItem(`isLike_${postId.value}`) === "1"
    }

    getSocialMeta(postId.value).then((res) => {
      const { like_count, share_count, comments_count } = res
      likeCount.value = like_count
      commentsCount.value = comments_count
      shareCount.value = share_count
      loading.value = false
    })

    const bindTapLike = () => {
      if (loading.value) {
        return
      }
      // getLikeIs()
      loading.value = true
      const num = isLike.value ? -1 : 1
      updateSocialMeta(postId.value, "like_count", num).then((res) => {
        if (!res && res != 0 && res != '0') {
          loading.value = false
          return
        }
        likeCount.value = res
        localStorage.setItem(
          `isLike_${postId.value}`,
          isLike.value ? "0" : "1"
        )
        getLikeIs()
        loading.value = false
      })
    }

    const bindTapComment = () => {
      location.href = "#VComments"
    }

    const bindTapShare = () => {
      if (loading.value) {
        return
      }
      loading.value = true
      showShareUp.value = true
    }

    // 分享
    const bindTapShareUp = (type) => {
      if (type === "weixin") {
        showQrcode.value = true
        showShareUp.value = false
      } else {
        const currTitle = document.title || ""
        const currDesc =
          document
            .querySelector('meta[name="description"]')
            ?.getAttribute("content") || ""
        const shareImage =
          document.querySelector("article#Article img")?.getAttribute("src") ||
          ""
        const weiboShareUrl = `https://service.weibo.com/share/share.php?title=【${currTitle}】${currDesc}&url=${currURL}&source=bookmark&pic=${shareImage}`
        window.open(weiboShareUrl)
      }
      updateSocialMeta(postId.value, "share_count").then((res) => {
        if (!res) {
          loading.value = false
          return
        }
        shareCount.value = res
        loading.value = false
      })
    }

    return {
      likeCount,
      commentsCount,
      shareCount,
      loading,
      isLike,
      showShareUp,
      showQrcode,
      currURL,
      bindTapLike,
      bindTapComment,
      bindTapShare,
      bindTapShareUp,
    }
  },
}
